<template>
	<view class="order_store">
		<view class="tabs">
			<view class="send">
				<view class="title">
					配送到店
				</view>
			</view>
		</view>
		<view class="order">
			<view class="user ">
				<view class="user_info" v-if="customerAddress.length>0">
					<text class="user_name">{{defaultAddress.customName}}</text>
					<text class="user_phone">{{defaultAddress.telephone}}</text>
					<navigator url="../addAddress/addAddress">
						<image src="../../static/images/zjc/A-16/icon_updata_address@2x.png" class="updata_icon">
						</image>
					</navigator>
				</view>
				<view class="user_info" v-else>
					<text class="user_phone" style="font-weight: bold;">没有收获地址，请先设置地址</text>
					<navigator url="../addAddress/addAddress">
						<image src="../../static/images/zjc/A-16/icon_updata_address@2x.png" class="updata_icon">
						</image>
					</navigator>
				</view>
				<view class="address">
					<text class="store_address">
						配送至:赤兔代理汽车馆(成都金城湖店)
					</text>
					<navigator url="../search/search">
						<button class="address_btn">更换门店</button>
					</navigator>
				</view>
				<view class="site">
					<text>四川省成都市高新区孵化园299号</text>
				</view>
				<view class="base">
					<text class="date">
						现货,预计明日(3月20日)送达
					</text>
					<view class="nav">
						<navigator url="../pageMap/pageMap">
							<image src="../../static/images/zjc/A-16/icon_nav@2x.png" class="icon"></image>
						</navigator>
						<text class="distance">
							距您: 3.2km
						</text>
					</view>
				</view>
			</view>
			<view class="order_main">
				<view class="container">
					<template v-for="item in list" v-if="item.id == id.tada">
						<view class="item" :key="item._id">
							<view class="top">
								<view class="left">
									<!-- <text class="types">{{item.goods.goodsTypeId}}</text> -->
									<image v-if="item.shopImg != null" :src="item.shopImg" class="goods_img"></image>
									<image v-if="item.shopImg == null" src="../../static/images/ymy/A31/image_qcfw1.png"
										class="goods_img"></image>
								</view>
								<view class="mid">
									<text class="name">{{item.serviceInfoName}}</text>
									<!-- <text class="else">{{item.goods.descs}}x{{item.totalCount}}</text> -->
									<view class="count">
										<text class="rmb">￥</text>
										<text class="price">{{item.price}}</text>
										<!-- <text class="time">工时￥{{item.time}}</text> -->
									</view>
								</view>
								<view class="counter">
									<!-- <button type="default" @tap="subNumber(item)">-</button> -->
									<text>数量1</text>
									<!-- <button type="default" @tap="addNumber(item)">+</button> -->
								</view>
							</view>
						</view>
					</template>
				</view>
			</view>

			<view class="pay_content">
				<view class="item">
					<text>支付方式</text>
					<view class="online">
						<text>线上支付</text>
						<image src="../../static/icons/zjc/button_back_arrow2x.png" class="online_icon"></image>
					</view>
				</view>
				<view class="item">
					<text>优惠券</text>
					<text class="discounts">已优惠-￥0</text>
				</view>
				<view class="item">
					<text>运费</text>
					<text>￥0</text>
				</view>
				<view class="item">
					<text>开发票</text>
					<switch checked="true" />
				</view>
			</view>
			<view class="pay_count" v-for="item in list" v-if="item.id == id.tada">
				<view class="price_content">
					<view>
						<text class="price">￥{{item.price}}</text>
					</view>
					<view class="detail">
						<text>金额明细</text>
						<text>已优惠￥0</text>
					</view>
				</view>
				<button class="pay_btn" @tap="toPay(item.price)">去支付</button>
			</view>
		</view>
	</view>
</template>
<script>
	import {
		createNamespacedHelpers
	} from "vuex";
	let {
		mapActions,
		mapState,
		mapMutations
	} = createNamespacedHelpers("users");
	let {
		mapActions: goodsMapAcitons,
		mapState: goodsMapState
	} = createNamespacedHelpers("carBeauty");
	export default {
		data() {
			return {

				currentId: 1, //控制切换
				showNumber: 2, //初始显示订单数量
				orderData: [],
				defaultAddress: {}, //用户默认地址
				id: {},
				list: []
			}
		},

		async onLoad(onLoad) {
			const _id = onLoad;
			this.id = _id;
			await this.mylookAddress();
			this.defaultAddress = this.customerAddress.filter(item => item.isdefault == 1)[0]; //获取默认地址


		},
		mounted() {
			console.log(this.id, 12321313)
			this.goodList(this.id._id)
		},
		methods: {
			...mapActions(["mylookAddress"]),
			...goodsMapAcitons(["getBeautyGoodList", "getBeautyNavigation"]),
		toPay(item) {
			const _id = uni.getStorageSync('id');
			uni.navigateTo({
				url: `../payment/payment?total=${item}&id=${_id}`
			})
		},
		//展示全部订单
		showAllOrder() {
			this.showNumber = this.orderData.length;
		},
		//收起订单
		hideAllOrder() {
			this.showNumber = 2;
		},
		async goodList(id) {
			const data = await this.getBeautyGoodList(id);
			// console.log(data,1231)
			this.list = data;

		}
		// 加数量
		// addNumber(order) {
		// 	order.number++;
		// },
		//减数量
		// subNumber(order) {
		// 	if (order.number > 1) {
		// 		order.number--;
		// 	}
		// }

	},
	//显示的订单数量
	computed: {
		...mapState(["customerAddress", "userId"]), //用户所有收货地址"]),
		//商品总价格
		totalPrice() {
			return this.orderData.reduce((data, item) => {
				console.log(item);
				return data + item.goods.price * item.totalCount;
			}, 0);
			// let total = 0;
			// this.orderData.filter((item) => {
			// 	total = total + item.goods.price * item.totalCount
			// });
			// return total;

		}
	}
	}
</script>

<style>
	.tabs {
		margin-top: 34rpx;
	}

	.tabs .send {
		display: flex;
		width: 304rpx;
		margin: 0 auto;
		border-radius: 8rpx 0rpx 0rpx 8rpx;
	}


	.tabs .send {
		width: 152rpx;
		line-height: 60rpx;
		text-align: center;
		background-color: #ffffff;

	}

	.title {
		width: 100%;
		line-height: 60rpx;
		text-align: center;
		background-color: #EE1515;

	}

	.tabs .send .active {
		color: #ffffff;
		background-color: #ee1515;
	}

	.order {
		width: 690rpx;
		margin: 0 auto;
		margin-top: 35rpx;
	}

	.order .user {
		width: 690rpx;
		height: 246rpx;
		background-color: #ffffff;
		border-radius: 20rpx;
		box-sizing: border-box;
		padding: 32rpx 72rpx 20rpx 48rpx;
		/* border: 1rpx solid red; */
	}

	.order .user .user_info {
		display: flex;
	}

	.user_info .updata_icon {
		width: 40rpx;
		height: 40rpx;
	}

	.user_info .user_name,
	.user_phone {
		height: 40rpx;
		font-family: PingFang SC;
		font-size: 28rpx;
		font-weight: normal;
		font-stretch: normal;
		line-height: 40rpx;
		letter-spacing: 0rpx;
		color: #555555;
	}

	.order .address {
		display: flex;
	}

	.address .store_address {
		width: 430rpx;
		height: 34rpx;
		font-size: 24rpx;
		line-height: 34rpx;
		letter-spacing: 0rpx;
		color: #676767;
	}

	.address .address_btn {
		/* width: 132rpx; */
		/* height: 44rpx; */
		border-radius: 24rpx;
		border: solid 2rpx #ff0d0d;
		font-size: 20rpx;
		line-height: 40rpx;
		color: #ff0d0d;
	}

	.user .site {
		width: 296rpx;
		height: 28rpx;
		font-size: 20rpx;
		line-height: 28rpx;
		letter-spacing: 0rpx;
		color: #676767;
		margin-bottom: 52rpx;
	}

	.user .base {
		display: flex;
		margin-top: 40rpx;
		justify-content: space-between;
	}

	.base .date {
		height: 34rpx;
		font-size: 20rpx;
		line-height: 34rpx;
		color: #9c9c9c;
	}

	.base .nav {
		display: flex;
	}

	.base .icon {
		width: 40rpx;
		height: 40rpx;
		/* vertical-align: middle; */
		margin-right: 16rpx;
	}

	.base .distance {
		height: 34rpx;
		font-size: 24rpx;
		line-height: 34rpx;
		color: #676767;
	}

	.order_main {
		width: 690rpx;
		background-color: #ffffff;
		border-radius: 20rpx;
		margin-top: 20rpx;
		/* border: 1rpx solid #4CD964; */
	}

	.order_main .item {
		box-sizing: border-box;
		padding: 30rpx 50rpx 20rpx 45rpx;
		border-bottom: 1rpx solid #dadada;
	}

	.item .left {
		display: flex;
		flex-direction: column;
	}

	.left .types {
		font-size: 28rpx;
		line-height: 40rpx;
		color: #646464;
		height: 40rpx;
		text-align: center;
	}

	.item .left .goods_img {
		width: 136rpx;
		height: 148rpx;
		background-color: #4CD964;
		margin-top: 20rpx;
	}

	.item .mid {
		display: flex;
		flex-direction: column;
		margin-top: 20rpx;
		margin-left: 28rpx;
		/* border: 1rpx solid red; */
	}

	.mid .name {
		font-size: 28rpx;
		line-height: 40rpx;
		color: #3b3b3b;
		margin-bottom: 18rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		/*弹性伸缩盒子模型显示*/
		display: -webkit-box;
		/*限制一个块元素显示的文本的行数*/
		-webkit-line-clamp: 2;
		/*设置或检索伸缩盒对象的子元素的排列方式*/
		-webkit-box-orient: vertical;
	}

	.mid .else {
		font-size: 20rpx;
		line-height: 28rpx;
		color: #3f3f3f;
		overflow: hidden;
		text-overflow: ellipsis;
		/*弹性伸缩盒子模型显示*/
		display: -webkit-box;
		/*限制一个块元素显示的文本的行数*/
		-webkit-line-clamp: 2;
		/*设置或检索伸缩盒对象的子元素的排列方式*/
		-webkit-box-orient: vertical;
	}

	.right .counter {
		display: flex;
	}

	.count {
		margin-top: 28rpx;
		/* border: 1rpx solid #4CD964; */
	}

	.count .price {
		font-size: 40rpx;
		line-height: 50rpx;
		color: #ee1515;
	}

	.count .rmb {
		font-size: 20rpx;
		line-height: 50rpx;
		color: #ee1515;
	}

	.count .time {
		font-size: 20rpx;
		line-height: 28rpx;
		color: #7c7c7c;
		margin-left: 8rpx;
	}

	.counter {
		margin-top: 195rpx;
		display: flex;
		margin-left: 60rpx;
	}

	.counter button {
		/* 	width: 45rpx;
		height: 45rpx; */
		line-height: 35rpx;
		text-align: center;
	}

	.counter input {
		width: 45rpx;
		height: 30rpx;
		text-align: center;
		border: 1px solid #C0C0C0;
	}

	.top {
		display: flex;
	}

	.more {
		margin-top: 40rpx;
	}

	.more button {
		width: 570rpx;
		height: 60rpx;
		border-radius: 12rpx;
		border: solid 2rpx #555555;
		line-height: 60rpx;
	}

	.pay_content {
		width: 690rpx;
		background-color: #ffffff;
		border-radius: 20rpx;
		margin: 0 auto;
		/* border: 1rpx solid #4CD964; */
		margin-top: 20rpx;
		margin-bottom: 180rpx;
	}

	.pay_content .item {
		width: 564rpx;
		height: 74rpx;
		border-bottom: solid 1rpx #dadada;
		display: flex;
		margin: 0 auto;
		justify-content: space-between;

	}

	.pay_content .item .discounts {
		color: #ff0d0d;
	}

	.item .online .online_icon {
		width: 40rpx;
		height: 40rpx;
		vertical-align: middle;
	}

	.item text {
		line-height: 74rpx;
	}

	.item .switch {
		width: 64rpx;
		height: 32rpx;
		margin-top: 24rpx;
	}

	.pay_count {
		width: 750rpx;
		height: 146rpx;
		position: fixed;
		bottom: 0;
		left: 0;
		box-sizing: border-box;
		padding: 35rpx 75rpx 50rpx 80rpx;
		display: flex;
		background-color: #ffffff;
		box-shadow: 0rpx -8rpx 12rpx 0rpx rgba(225, 225, 225, 0.16);
		/* border: 1rpx solid #4CD964; */
	}

	.pay_count .price_content {
		display: flex;
	}

	.pay_count .pay_btn {
		width: 156rpx;
		height: 56rpx;
		background-color: #f5610c;
		border-radius: 32rpx;
		line-height: 56rpx;
		font-size: 32rpx;
		color: #ffffff;
		margin-top: 35rpx;
	}

	.price_content .detail {
		display: flex;
		flex-direction: column;
		margin-top: 24rpx;
	}

	.price_content .detail text {
		font-size: 20rpx;
		line-height: 28rpx;
		color: #8c8c8c;
	}

	.price_content .price {
		font-size: 80rpx;
		color: #ee1515;
	}
</style>
